import {ElementUtils} from '../utils/ElementUtils.js';
import {Constant} from '../Constant';
class ViewManager {
  constructor(spaceId, i18n) {
    this.spaceId = spaceId;
    this.i18n = i18n;
    this.spinner = new kintoneUIComponent.Spinner();
    this.saveStatusButtonId = Constant.SAVE_STATUS_BUTTON_ID;
  }
  initTabView(elementView) {
    document.getElementsByTagName('BODY')[0].appendChild(this.spinner.render());

    elementView.settingsArea = ElementUtils.generateSettingAreaView();
    elementView.contact_element_list = ElementUtils.generateResultListyArea();
    elementView.query_elements_area = ElementUtils.generateQuerysArea();
    ElementUtils.addTextFieldTitle(this.i18n.query_area_title, elementView.query_elements_area);
    // init & add graph area
    const graph_area = ElementUtils.generateGraphElementView();
    const graph_container = ElementUtils.generateGraphContainer();
    const saveStatusButton = ElementUtils.generateSaveStatusButton(this.i18n.save_status);
    saveStatusButton.id = this.saveStatusButtonId;
    graph_area.appendChild(saveStatusButton);
    graph_area.appendChild(graph_container);
    // add settings_area
    const diagramVerticalContainer = ElementUtils.generateContactElementsContainer();
    diagramVerticalContainer.appendChild(elementView.settingsArea);
    diagramVerticalContainer.id = 'tab_diagramContainer';
    diagramVerticalContainer.appendChild(elementView.query_elements_area);

    // add tab area
    const tabView = ElementUtils.generateTabView([diagramVerticalContainer.id, graph_area.id], [this.i18n.tab_setting, this.i18n.tab_graph]);
    tabView.appendChild(diagramVerticalContainer);
    tabView.appendChild(graph_area);
    kintone.app.record.getSpaceElement(this.spaceId).appendChild(tabView);
  }
  bindSaveStatusButtonListener(onSaveSatusClick) {
    document.getElementById(this.saveStatusButtonId).addEventListener('click', onSaveSatusClick);
  }
  showLoading() {
    this.spinner.show();
  }
  hideLoading() {
    this.spinner.hide();
  }
}
export {
  ViewManager
};